<template>
  <view
    class="zl-button"
    :class="[
      typeClass,
      sizeClass,
      { 'is-disabled': disabled || loading },
      { 'is-loading': loading },
      { 'is-plain': plain },
      { 'is-round': round },
      { 'is-circle': circle },
    ]"
    @click="handleClick"
    :style="customStyle"
  >
    <!-- loading 状态指示器 -->
    <view v-if="loading" class="loading-icon">
      <view
        class="loading-spinner"
        :style="{ color: loadingColor || textColor }"
      ></view>
    </view>

    <!-- 按钮文本 -->
    <text class="button-text" :style="{ color: textColor || defaultTextColor }">
      <slot>{{ text }}</slot>
    </text>
  </view>
</template>

<script>
export default {
  name: "UniButton",
  props: {
    // 按钮文本
    text: {
      type: String,
      default: "按钮",
    },
    // 按钮类型 (primary / success / warning / danger / info)
    type: {
      type: String,
      default: "default",
    },
    // 按钮尺寸 (large / normal / small / mini)
    size: {
      type: String,
      default: "normal",
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    // 是否显示加载状态
    loading: {
      type: Boolean,
      default: false,
    },
    // loading 颜色
    loadingColor: {
      type: String,
      default: "",
    },
    // 文本颜色
    textColor: {
      type: String,
      default: "",
    },
    // 是否为朴素按钮
    plain: {
      type: Boolean,
      default: false,
    },
    // 是否为圆角按钮
    round: {
      type: Boolean,
      default: false,
    },
    // 是否为圆形按钮
    circle: {
      type: Boolean,
      default: false,
    },
    // 自定义样式
    customStyle: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    // 类型样式类
    typeClass() {
      return `button-${this.type}`;
    },
    // 尺寸样式类
    sizeClass() {
      return `button-${this.size || "normal"}`;
    },
    // 默认文本颜色（根据类型自动计算）
    defaultTextColor() {
      if (this.plain) {
        const plainColors = {
          primary: "#007aff",
          success: "#00b42a",
          warning: "#ff7d00",
          danger: "#f53f3f",
          info: "#86909c",
        };
        return plainColors[this.type] || "#333";
      }
      return this.type === "default" || this.type === "info" ? "#333" : "#fff";
    },
  },
  methods: {
    // 点击事件处理
    handleClick() {
      if (!this.disabled && !this.loading) {
        this.$emit("click");
      }
    },
  },
};
</script>

<style scoped>
.zl-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 30rpx;
  font-size: 32rpx;
  text-align: center;
  text-decoration: none;
  border-radius: 6rpx;
  border: 2rpx solid transparent;
  transition: all 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}

/* 尺寸样式 */
.button-large {
  height: 100rpx;
  line-height: 100rpx;
}
.button-normal {
  height: 88rpx;
  line-height: 88rpx;
}
.button-small {
  height: 72rpx;
  line-height: 72rpx;
  font-size: 28rpx;
  padding: 0 24rpx;
}
.button-mini {
  height: 56rpx;
  line-height: 56rpx;
  font-size: 24rpx;
  padding: 0 16rpx;
}

/* 类型样式 */
.button-default {
  background-color: #f5f5f5;
  border-color: #ddd;
}
.button-default:active {
  background-color: #ddd;
  border-color: #ddd;
}
.button-primary {
  background-color: #007aff;
  border-color: #007aff;
}
.button-primary:active {
  background-color: #0062ca;
  border-color: #0062ca;
}
.button-success {
  background-color: #00b42a;
  border-color: #00b42a;
}
.button-success:active {
  background-color: #009222;
  border-color: #009222;
}
.button-warning {
  background-color: #ff7d00;
  border-color: #ff7d00;
}
.button-warning:active {
  background-color: #e66f00;
  border-color: #e66f00;
}
.button-danger {
  background-color: #f53f3f;
  border-color: #f53f3f;
}
.button-danger:active {
  background-color: #d82727;
  border-color: #d82727;
}
.button-info {
  background-color: #eee;
  border-color: #eee;
}
.button-info:active {
  background-color: #ddd;
  border-color: #ddd;
}

/* 朴素按钮 */
.is-plain {
  background-color: #fff;
}
.is-plain.button-default {
  border-color: #ddd;
}
.is-plain.button-primary {
  border-color: #007aff;
}
.is-plain.button-success {
  border-color: #00b42a;
}
.is-plain.button-warning {
  border-color: #ff7d00;
}
.is-plain.button-danger {
  border-color: #f53f3f;
}
.is-plain.button-info {
  border-color: #86909c;
}

/* 圆角/圆形 */
.is-round {
  border-radius: 60rpx;
}
.is-circle {
  border-radius: 50%;
  padding: 0;
  width: 88rpx;
  height: 88rpx;
}
.is-circle.button-large {
  width: 100rpx;
  height: 100rpx;
}
.is-circle.button-small {
  width: 72rpx;
  height: 72rpx;
}
.is-circle.button-mini {
  width: 56rpx;
  height: 56rpx;
}

/* 禁用状态 */
.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 加载状态 */
.is-loading .button-text {
  margin-left: 16rpx;
}

/* loading 动画 */
.loading-icon {
  width: 1em;
  height: 1em;
  position: relative;
}
.loading-spinner {
  width: 100%;
  height: 100%;
  border: 2rpx solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spinner-rotate 0.8s linear infinite;
}

@keyframes spinner-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 按钮文本 */
.button-text {
  transition: all 0.2s;
}
</style>
